<template>
    <el-form 
        :model="form" 
        ref="form" 
        :rules="rules" 
        class="form">
            <el-form-item class="form-item" prop="username">
                <el-input 
                v-model="form.username"
                placeholder="用户名手机">
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="captcha">
                <el-input 
                v-model="form.captcha"
                placeholder="验证码" >
                    <template slot="append">
                        <el-button @click="handleSendCaptcha">
                            发送验证码
                        </el-button>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="nickname">
                <el-input 
                 v-model="form.nickname"
                placeholder="你的名字">
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="password">
                <el-input 
                 v-model="form.password"
                placeholder="密码" 
                type="password"
                ></el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="checkPassword">
                <el-input 
                 v-model="form.checkPassword"
                placeholder="确认密码" 
                type="password">
                </el-input>
            </el-form-item>

            <el-button 
            class="submit" 
            type="primary" 
            @click="handleRegSubmit">
                注册
            </el-button>
        </el-form>
</template>

<script>
export default {
    data(){
        // 自定义校验函数
        const validatePass = (rule,value,callback)=>{
            if(value === ''){
                callback(new Error('请再次输入密码'));
            }else if(value !==this.form.password){
                callback(new Error('两次密码输入不一样'))
            }else{
                callback();
            }
        };
        const validateUsername = (rule,value,callback)=>{
            if(value === ''){
                callback(new Error('请输入用户名'));
            }else if(!(/^1[3|5|7|8][0-9]{9}/.test(value))){
                callback(new Error('手机号码格式错误'));
            }else{
                callback();
            }
        }



        return {
            // 表单数据
            form: {
                username: "",
                captcha: "", // 手机验证码
                nickname: "", // 昵称
                password: "",
                checkPassword: "" // 确认密码
            },
            // 表单规则
            rules: {
                username: [
                    // { required: true, message: "请输入用户名", trigger: "blur" }
                    // 定义一个手机格式方法
                    { validator: validateUsername, trigger: 'blur' }
                ],
                captcha: [
                    { required: true, message: "请输入手机验证码", trigger: "blur" }
                ],
                nickname: [
                    { required: true, message: "请输入昵称", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                checkPassword: [
                    // validator是用来指定自定义的验证函数
                    { validator: validatePass, trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        // 发送验证码
        async handleSendCaptcha(){
            if(!this.form.username){
                this.$message.error('手机号不能为空');
            }
            // 调用actions中的发送验证码的方法
            // this.$store.dispatch('user/sendCaptcha',this.form.username).then(code=>{
            //     this.$message.success("模拟手机返回的验证码：" + code);
            // })
            // await 可以接受promise的返回值
            const code = await this.$store.dispatch('user/sendCaptcha',this.form.username);
            this.$message.success("模拟手机返回的验证码：" + code);
        },
        // 注册
        handleRegSubmit(){
           // 验证通过
            this.$refs.form.validate(async valid => {
                if(valid){
                    // console.log(this.form)
                    // 解构对象，checkpassword不该传过去
                    // props就是除了checkpassword外的属性
                    try{
                        const {checkPassword,...props} = this.form;
                        await this.$store.dispatch('user/register',props)
                        // 跳转到首页
                        this.$router.replace('/');
                        // 弹窗提示
                        this.$message.success('注册成功');
                    }catch(err){
                        
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .form{
        padding:25px;
    }
    .form-item{
        margin-bottom:20px;
    }
    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }
    .submit{
        width:100%;
        margin-top:10px;
    }
</style> 